<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>基本元素</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../system/css/common.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <style>
    .color-palette {
      height: 35px;
      line-height: 35px;
      text-align: center;
    }

    .color-palette-set {
      margin-bottom: 15px;
    }

    .color-palette span {
      display: none;
      font-size: 12px;
    }

    .color-palette:hover span {
      display: block;
    }

    .color-palette-box h4 {
      position: absolute;
      top: 100%;
      left: 25px;
      margin-top: -40px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      display: block;
      z-index: 7;
    }
  </style>
</head>
<body class="hold-transition gray-bg sidebar-mini">
<div class="wrapper">
    <!-- Main content -->
  <section class="content">
    <!-- COLOR PALETTE -->
    <div class="box box-default color-palette-box">
      <div class="box-header with-border">
        <h3 class="box-title"><i class="fa fa-tag"></i> 调色板</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Primary</h4>

            <div class="color-palette-set">
              <div class="bg-light-blue disabled color-palette"><span>Disabled</span></div>
              <div class="bg-light-blue color-palette"><span>#3c8dbc</span></div>
              <div class="bg-light-blue-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Info</h4>

            <div class="color-palette-set">
              <div class="bg-aqua disabled color-palette"><span>Disabled</span></div>
              <div class="bg-aqua color-palette"><span>#00c0ef</span></div>
              <div class="bg-aqua-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Success</h4>

            <div class="color-palette-set">
              <div class="bg-green disabled color-palette"><span>Disabled</span></div>
              <div class="bg-green color-palette"><span>#00a65a</span></div>
              <div class="bg-green-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Warning</h4>

            <div class="color-palette-set">
              <div class="bg-yellow disabled color-palette"><span>Disabled</span></div>
              <div class="bg-yellow color-palette"><span>#f39c12</span></div>
              <div class="bg-yellow-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Danger</h4>

            <div class="color-palette-set">
              <div class="bg-red disabled color-palette"><span>Disabled</span></div>
              <div class="bg-red color-palette"><span>#f56954</span></div>
              <div class="bg-red-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Gray</h4>

            <div class="color-palette-set">
              <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
              <div class="bg-gray color-palette"><span>#d2d6de</span></div>
              <div class="bg-gray-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
        <div class="row">
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Navy</h4>

            <div class="color-palette-set">
              <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
              <div class="bg-navy color-palette"><span>#001F3F</span></div>
              <div class="bg-navy-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Teal</h4>

            <div class="color-palette-set">
              <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
              <div class="bg-teal color-palette"><span>#39CCCC</span></div>
              <div class="bg-teal-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Purple</h4>

            <div class="color-palette-set">
              <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
              <div class="bg-purple color-palette"><span>#605ca8</span></div>
              <div class="bg-purple-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Orange</h4>

            <div class="color-palette-set">
              <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
              <div class="bg-orange color-palette"><span>#ff851b</span></div>
              <div class="bg-orange-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Maroon</h4>

            <div class="color-palette-set">
              <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
              <div class="bg-maroon color-palette"><span>#D81B60</span></div>
              <div class="bg-maroon-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-sm-4 col-md-2">
            <h4 class="text-center">Black</h4>

            <div class="color-palette-set">
              <div class="bg-black disabled color-palette"><span>Disabled</span></div>
              <div class="bg-black color-palette"><span>#111111</span></div>
              <div class="bg-black-active color-palette"><span>Active</span></div>
            </div>
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
    <!-- START ALERTS AND CALLOUTS -->
    <h2 class="page-header">警报和标注</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="box box-default">
          <div class="box-header with-border">
            <i class="fa fa-warning"></i>

            <h3 class="box-title">警报</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="alert alert-danger alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4><i class="icon fa fa-ban"></i> 警报!</h4>
              危险警报
            </div>
            <div class="alert alert-info alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4><i class="icon fa fa-info"></i> 警报!</h4>
              信息警报
            </div>
            <div class="alert alert-warning alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4><i class="icon fa fa-warning"></i> 警报!</h4>
              警告警报
            </div>
            <div class="alert alert-success alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <h4><i class="icon fa fa-check"></i> 警报!</h4>
              成功警报
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->

      <div class="col-md-6">
        <div class="box box-default">
          <div class="box-header with-border">
            <i class="fa fa-bullhorn"></i>
            <h3 class="box-title">标注</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="callout callout-danger">
              <h4>危险标注</h4>
              <p>危险内容</p>
            </div>
            <div class="callout callout-info">
              <h4>信息标注</h4>
              <p>信息内容</p>
            </div>
            <div class="callout callout-warning">
              <h4>警告标注</h4>
              <p>警告内容</p>
            </div>
            <div class="callout callout-success">
              <h4>成功标注</h4>
              <p>成功内容</p>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <!-- END ALERTS AND CALLOUTS -->
    <!-- START CUSTOM TABS -->
    <h2 class="page-header">模板自定义选项卡</h2>

    <div class="row">
      <div class="col-md-6">
        <!-- Custom Tabs -->
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_1" data-toggle="tab">选项卡 1</a></li>
            <li><a href="#tab_2" data-toggle="tab">选项卡 2</a></li>
            <li><a href="#tab_3" data-toggle="tab">选项卡 3</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                下拉 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">提交</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">再次提交</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">其他操作</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">分割线</a></li>
              </ul>
            </li>
            <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab_1">
              <b>如何使用:</b>
              <p>与原始引导选项卡完全相同，只是您应该使用自定义包装器<code>.nav-tabs-custom</code> 来实现此样式.</p>
				一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
				在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
				我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_2">
              一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
              在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
              我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_3">
              一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
              在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
              我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
      </div>
      <!-- /.col -->

      <div class="col-md-6">
        <!-- Custom Tabs (Pulled to the right) -->
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs pull-right">
            <li class="active"><a href="#tab_1-1" data-toggle="tab">选项卡 1</a></li>
            <li><a href="#tab_2-2" data-toggle="tab">选项卡 2</a></li>
            <li><a href="#tab_3-2" data-toggle="tab">选项卡 3</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                下拉 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">提交</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">再次提交</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">其他操作</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">分割线</a></li>
              </ul>
            </li>
            <li class="pull-left header"><i class="fa fa-th"></i> Custom Tabs</li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab_1-1">
              <b>如何使用:</b>
              <p>与原始引导选项卡完全相同，只是您应该使用自定义包装器<code>.nav-tabs-custom</code> 来实现此样式.</p>
				一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
				在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
				我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_2-2">
				一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
				在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
				我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
            <div class="tab-pane" id="tab_3-2">
				一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
				在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
				我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来都不是一个比现在更伟大的艺术家。
            </div>
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <!-- END CUSTOM TABS -->
    <!-- START PROGRESS BARS -->
    <h2 class="page-header">进度条</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">不同尺寸的进度条</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <p><code>.progress</code></p>

            <div class="progress">
              <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">40% Complete (success)</span>
              </div>
            </div>
            <p>Class: <code>.sm</code></p>

            <div class="progress progress-sm active">
              <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                <span class="sr-only">20% Complete</span>
              </div>
            </div>
            <p>Class: <code>.xs</code></p>

            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                <span class="sr-only">60% Complete (warning)</span>
              </div>
            </div>
            <p>Class: <code>.xxs</code></p>

            <div class="progress progress-xxs">
              <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                <span class="sr-only">60% Complete (warning)</span>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col (left) -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">进度条</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="progress">
              <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">40% Complete (success)</span>
              </div>
            </div>
            <div class="progress">
              <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                <span class="sr-only">20% Complete</span>
              </div>
            </div>
            <div class="progress">
              <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                <span class="sr-only">60% Complete (warning)</span>
              </div>
            </div>
            <div class="progress">
              <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span class="sr-only">80% Complete</span>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col (right) -->
    </div>
    <!-- /.row -->
    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">不同尺寸的垂直进度条</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body text-center">
            <p>通过添加<code>.vertical</code> 以及 <code>.progress-sm</code>, <code>.progress-xs</code> 或者
              <code>.progress-xxs</code> 实现:</p>

            <div class="progress vertical active">
              <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                <span class="sr-only">40%</span>
              </div>
            </div>
            <div class="progress vertical progress-sm">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
                <span class="sr-only">100%</span>
              </div>
            </div>
            <div class="progress vertical progress-xs">
              <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                <span class="sr-only">60%</span>
              </div>
            </div>
            <div class="progress vertical progress-xxs">
              <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                <span class="sr-only">60%</span>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col (left) -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">垂直进度条</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body text-center">
            <p>通过添加 <code>.vertical</code> 实现:</p>

            <div class="progress vertical">
              <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                <span class="sr-only">40%</span>
              </div>
            </div>
            <div class="progress vertical">
              <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%">
                <span class="sr-only">20%</span>
              </div>
            </div>
            <div class="progress vertical">
              <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                <span class="sr-only">60%</span>
              </div>
            </div>
            <div class="progress vertical">
              <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%">
                <span class="sr-only">80%</span>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col (right) -->
    </div>
    <!-- /.row -->
    <!-- END PROGRESS BARS -->

    <!-- START ACCORDION & CAROUSEL-->
    <h2 class="page-header">Bootstrap 手风琴 & 轮播</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">折叠手风琴</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="box-group" id="accordion">
              <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
              <div class="panel box box-primary">
                <div class="box-header with-border">
                  <h4 class="box-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                      手风琴组
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="box-body">
                    一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
                    在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
                    我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来
                    都不是一个比现在更伟大的艺术家。
                  </div>
                </div>
              </div>
              <div class="panel box box-danger">
                <div class="box-header with-border">
                  <h4 class="box-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                      危险样式手风琴组
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="box-body">
                    一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
                    在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
                    我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来
                    都不是一个比现在更伟大的艺术家。
                  </div>
                </div>
              </div>
              <div class="panel box box-success">
                <div class="box-header with-border">
                  <h4 class="box-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                      成功样式手风琴
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                  <div class="box-body">
                    一种美妙的宁静占据了我的整个灵魂，就像我全心全意享受的春天的这些甜美的早晨。我独自一人，
                    在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我太高兴了，我亲爱的朋友，
                    我太专注于纯粹宁静的存在，以至于忽略了我的才能。我现在应该一笔也画不出来，但我觉得我从来
                    都不是一个比现在更伟大的艺术家。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">轮播</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
              </ol>
              <div class="carousel-inner">
                <div class="item active">
                  <img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" alt="First slide">

                  <div class="carousel-caption">
                    First Slide
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap" alt="Second slide">

                  <div class="carousel-caption">
                    Second Slide
                  </div>
                </div>
                <div class="item">
                  <img src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap" alt="Third slide">

                  <div class="carousel-caption">
                    Third Slide
                  </div>
                </div>
              </div>
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="fa fa-angle-left"></span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="fa fa-angle-right"></span>
              </a>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <!-- END ACCORDION & CAROUSEL-->

    <!-- START TYPOGRAPHY -->
    <h2 class="page-header">排版</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">标题</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">文本强调</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <p class="lead">Lead to emphasize importance</p>

            <p class="text-green">Text green to emphasize success</p>

            <p class="text-aqua">Text aqua to emphasize info</p>

            <p class="text-light-blue">Text light blue to emphasize info (2)</p>

            <p class="text-red">Text red to emphasize danger</p>

            <p class="text-yellow">Text yellow to emphasize warning</p>

            <p class="text-muted">Text muted to emphasize general</p>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">块引号</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">右侧块引号</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body clearfix">
            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-md-4">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">无序列表</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
      <div class="col-md-4">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">有序列表</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ol>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ol>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ol>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
      <div class="col-md-4">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">无样式列表</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <ul class="list-unstyled">
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->

    <div class="row">
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>

            <h3 class="box-title">描述</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <dl>
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            </dl>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
      <div class="col-md-6">
        <div class="box box-solid">
          <div class="box-header with-border">
            <i class="fa fa-text-width"></i>
            <h3 class="box-title">水平描述</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <dl class="dl-horizontal">
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
              <dt>Felis euismod semper eget lacinia</dt>
              <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              </dd>
            </dl>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->
  </section>
  
  <div class="control-sidebar-bg"></div>
</div>

<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
</body>
</html>
